<template>
    <div>
        直播
        <canvas id="video" width="640" height="360" /><br />
        <button v-on:click="startPlay">Start</button>
        <button v-on:click="stopPlay">Stop</button>
    </div>
</template>
<script setup>
useHead({
    title: '直播',
    meta: [{
        name: 'description',
        content: 'My amazing site.'
    }],
    bodyAttrs: {
        class: 'test'
    },
    script: [{ src: '/static/NodePlayer.min.js' }]
})

let np = null
onMounted(() => {
    np = new NodePlayer();
    np.setView("video");
    np.on("stats", (s) => {
        console.log(s);
    });
})

const startPlay = function () {
    // http://localhost:8000/live/zzm12321.flv =>  注意是 推流码.flv
    np.start("http://10.161.6.32:8000/live/zzm12321.flv");
}
const stopPlay = function () {
    np.stop();
}

</script>
<style scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
